/**
 * 绘制矩形云线
 * @param context 需要进行绘制的画布
 * @param mouseX 当前鼠标x轴坐标
 * @param mouseY 当前鼠标y轴坐标
 * @param mouseStartX 鼠标按下时的x轴坐标
 * @param mouseStartY 鼠标按下时的y轴坐标
 * @param borderWidth 边框宽度
 * @param color 边框颜色
 */
export function drawCloud(
  context: CanvasRenderingContext2D,
  mouseX: number,
  mouseY: number,
  mouseStartX: number,
  mouseStartY: number,
  borderWidth: number,
  color: string
) {
  // 坐标边界处理，解决反向绘制时的报错问题
  const startX = mouseX < mouseStartX ? mouseX : mouseStartX;
  const startY = mouseY < mouseStartY ? mouseY : mouseStartY;
  const endX = mouseX >= mouseStartX ? mouseX : mouseStartX;
  const endY = mouseY >= mouseStartY ? mouseY : mouseStartY;
  context.save();
  // 设置边框颜色
  context.strokeStyle = color;
  // 设置边框大小
  context.lineWidth = borderWidth;
  context.beginPath();
  const r = 10;
  // 绘制云线矩形
  const countX = (endX - startX) / (2 * r);
  const countY = (endY - startY) / (2 * r);
  for (let i = 0; i < countX; i++) {
    const arcX = startX + (i * 2 + 1) * r;
    const arcY = startY;
    context.arc(arcX, arcY, r, (Math.PI / 180) * 180, 0, false);
  }
  for (let j = 0; j < countY; j++) {
    const arcX = startX + (countX * 2 + 1) * r;
    const arcY = startY + (j * 2 + 1) * r;
    const startAngle = (Math.PI / 180) * 270;
    const endAngle = (Math.PI / 180) * 90;
    context.arc(arcX, arcY, r, startAngle, endAngle, false);
  }
  for (let i = 0; i < countX; i++) {
    const arcX = startX + (countX * 2 + 1) * r - (i * 2 + 1) * r;
    const arcY = startY + (countY * 2 + 1) * r;
    context.arc(arcX, arcY, r, 0, (Math.PI / 180) * 180, false);
  }
  for (let j = 0; j < countY; j++) {
    const arcX = startX;
    const arcY = startY + (countY * 2 + 1) * r - (j * 2 + 1) * r;
    const startAngle = (Math.PI / 180) * 90;
    const endAngle = (Math.PI / 180) * 270;
    context.arc(arcX, arcY, r, startAngle, endAngle, false);
  }
  context.closePath();
  context.stroke();
  // 绘制结束
  context.restore();
}
